<script setup lang="ts">
import type { UnwrapRef } from 'vue';
import { h, ref, watch } from 'vue';
import type { DataTableColumns } from 'naive-ui';
import { NButton, NTooltip } from 'naive-ui';

interface Props {
  compareName?: string;
  compareData?: any;
}

const props = withDefaults(defineProps<Props>(), {
  compareName: '',
  compareData: {
    fileAmount: 0,
    checkTime: '——',
    wordAmount: 0,
    picAmount: 0,
    crossAmount: 0
  }
});

// 定义方法并定义好返回值的格式
interface Emits {
  (e: 'viewDetailClick', value: UnwrapRef<string>): string;
}

// defineEmits 不用单独引入，是全局默认引入的
const emit = defineEmits<Emits>();

type RowData = {
  id: number;
  bidUnit: string;
  createTime: string;
  number: number;
  parentId: number;
  logId: number;
  checkStatus: number;
};

const contentWidth = ref<number | undefined>(undefined);

let columns: DataTableColumns<RowData> = [];

const defaultColumns: DataTableColumns<RowData> = [
  {
    title: '序号',
    key: 'number',
    width: 80,
    align: 'center',
    fixed: 'left'
  },
  {
    title: '投标单位',
    key: 'bidUnit',
    align: 'center',
    width: 180,
    fixed: 'left',
    render: (item: RowData) => {
      if (item.bidUnit.length > 12) {
        return h(
          NTooltip,
          { contentStyle: { maxWidth: '300px' } },
          {
            trigger: () => `${item.bidUnit.substring(0, 12)}...`,
            default: () =>
              h(
                'span',
                {},
                {
                  default: () => item.bidUnit
                }
              )
          }
        );
      }
      return item.bidUnit;
    }
  },
  {
    title: '检査状态',
    key: 'checkStatus',
    align: 'center',
    width: 80,
    fixed: 'left',
    render(item: RowData) {
      return item.checkStatus === 1 ? '已完成' : '检测中';
    }
  }
];

const contentsColumns: DataTableColumns<RowData> = [];

const operateColumns: DataTableColumns<RowData> = [
  {
    title: '操作',
    key: '',
    width: 100,
    align: 'center',
    fixed: 'right',
    render(item: RowData, index: number) {
      return h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          size: 'small',
          style: 'height: 32px; font-family: HarmonyOS Sans SC; font-weight: 400; font-size: 18px; color: #816CFE;',
          onClick: () => {
            emit('viewDetailClick', index + 1);
          }
        },
        { default: () => '查看' } // 按钮显示名称
      );
    }
  }
];

watch(
  () => props.compareData,
  value => {
    if (value.checkContent && value.checkContent.length > 0) {
      if (value.checkContent.includes('zhengwen')) {
        contentsColumns.push({
          title: '正文相似量',
          key: 'zhengwen',
          align: 'center',
          width: 100
        });
      }
      if (value.checkContent.includes('mulu')) {
        contentsColumns.push({
          title: '目录相似量',
          key: 'mulu',
          align: 'center',
          width: 100
        });
      }
      if (value.checkContent.includes('zitizihao')) {
        contentsColumns.push({
          title: '字体字号相似量',
          key: 'zitizihao',
          align: 'center',
          width: 120
        });
      }
      if (value.checkContent.includes('tupian')) {
        contentsColumns.push({
          title: '图片相似量',
          key: 'tupian',
          align: 'center',
          width: 100
        });
      }
      if (value.checkContent.includes('pizhu')) {
        contentsColumns.push({
          title: '批注相似量',
          key: 'pizhu',
          align: 'center',
          width: 100
        });
      }
      if (value.checkContent.includes('mingcheng')) {
        contentsColumns.push({
          title: '投标人名称相似量',
          key: 'mingcheng',
          align: 'center',
          width: 160
        });
      }
      if (value.checkContent.includes('dizhi')) {
        contentsColumns.push({
          title: '投标人地址相似量',
          key: 'dizhi',
          align: 'center',
          width: 160
        });
      }
      if (value.checkContent.includes('faren')) {
        contentsColumns.push({
          title: '法人查重相似量',
          key: 'faren',
          align: 'center',
          width: 160
        });
      }
      if (value.checkContent.includes('baojia')) {
        contentsColumns.push({
          title: '报价规律性相似量',
          key: 'baojia',
          align: 'center',
          width: 160
        });
      }
      if (value.checkContent.includes('baozhengjin')) {
        contentsColumns.push({
          title: '投标保证金付款单位相似量',
          key: 'baozhengjin',
          align: 'center',
          width: 200
        });
      }
      if (value.checkContent.includes('shijian')) {
        contentsColumns.push({
          title: '投标文件编辑时间相似量',
          key: 'shijian',
          align: 'center',
          width: 200
        });
      }
      if (value.checkContent.includes('zuozhe')) {
        contentsColumns.push({
          title: '投标文件的编制作者相似量',
          key: 'zuozhe',
          align: 'center',
          width: 200
        });
      }

      columns = [...defaultColumns, ...contentsColumns, ...operateColumns];

      for (let i: number = 0; i < columns.length; i++) {
        contentWidth.value += columns[i].width;
      }

      // console.log('contentWidth: ', contentWidth.value);
    }
  },
  { immediate: true, deep: true }
);
</script>

<template>
  <div class="result-content flex flex-col">
    <div class="flex flex-row items-center">
      <div class="title-tag"></div>
      <span class="title-text">{{ compareName }}</span>
    </div>
    <div class="total-box">
      <NGrid x-gap="12" :cols="3">
        <NGi>
          <span class="total-text">检测投标文件数：{{ compareData.fileAmount }}</span>
        </NGi>
        <NGi>
          <span class="total-text">检测时间：{{ compareData.checkTime }}</span>
        </NGi>
        <NGi>
          <span></span>
        </NGi>
      </NGrid>
      <NGrid x-gap="12" :cols="3">
        <NGi>
          <span class="total-text">提取总文字数：{{ compareData.wordAmount }}</span>
        </NGi>
        <NGi>
          <span class="total-text">提取图片数：{{ compareData.picAmount }}</span>
        </NGi>
        <NGi>
          <span class="total-text">文档交叉组合：{{ compareData.crossAmount }}种</span>
        </NGi>
      </NGrid>
    </div>
    <NDivider />
    <div class="flex flex-row items-center">
      <div class="title-tag"></div>
      <span class="title-text">任务异常项汇总</span>
    </div>
    <NDataTable
      :columns="columns"
      :data="compareData.list"
      :row-key="(item: any) => item.id"
      :max-height="260"
      virtual-scroll-x
      :scroll-x="columns.length * 190"
      :min-row-height="56"
      :height-for-row="56"
      virtual-scroll-header
      :header-height="56"
    />
    <div class="flex flex-row items-center justify-end">
      <span class="warning-tips">
        *郑重申明：本平台检测结果只作为查重工具使用，不可作为他用，本平台和主体不承担使用检测结果作为他用的任何法律责任。
      </span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.result-content {
  padding: 25px 25px 0;
}
.title-tag {
  width: 6px;
  height: 20px;
  background: #806cfe;
}
.title-text {
  margin-left: 6px;
  font-weight: 500;
  font-size: 22px;
  color: #333333;
  line-height: 48px;
}
.total-box {
  margin: 15px 19px;
  padding: 42px 75px;
  height: 164px;
  background: url('@/assets/duplicate-check/detail-top-bg.png') no-repeat;
  background-size: 100% 100%;
  .total-text {
    font-weight: 500;
    font-size: 20px;
    color: #333333;
    line-height: 40px;
  }
}
.warning-tips {
  margin: 20px 0;
  font-weight: 400;
  font-size: 16px;
  color: #ff7575;
  line-height: 48px;
}
:deep(.n-data-table .n-data-table-th) {
  background-color: #f2f0ff;
  height: 54px;
  color: #666666;
  font-size: 20px;
}
:deep(.n-data-table .n-data-table-td) {
  font-size: 18px;
}
</style>
